<script>

export default {
  data() {
    return {
      value: 1,

      name: '',
      startTime: '',
      endTime: '',

      user:{},
      cars:{}

    };
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    if (this.user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }
    this.cars = JSON.parse(localStorage.getItem('cars'))
    //汽车id

  },
  methods: {
    goToXia(){
      if(this.startTime == '' || this.endTime == ''){
        alert('请输入完整信息')
        return
      }
      this.$router.push({
        path:'/scheduledDetail',
        query:{
          userId: this.user.userId,
          nickname: this.user.nickname,
          startTime: this.startTime,
          endTime: this.endTime,
          //汽车id
          carId: this.cars.carId,
        }
      })

    },
    goToHistory(){
      // 设置标记，表示需要刷新当前页面
      localStorage.setItem('carRental', 'true')
      history.back();
    }


  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
};

</script>

<template>
  <div class="OneDiv">

    <!-- 租车标题栏 -->
    <div class="carRentalDiv1">
      <button class="carRentalBut1">
        <img @click="goToHistory" class="carRentalImg1" src="http://sq5qizw6e.hn-bkt.clouddn.com/linshi/left.png">
      </button>
      <b class="carRentalB1">我要租车</b>
    </div>

    <!-- 租车车辆信息栏 -->
    <div class="carRentalDiv2">
      <div class="carRentalDiv3">
        <img class="carRentalImg2" :src="cars.imageUrl[0]">
      </div>

      <div class="carRentalDiv4">
        <b class="carRentalB2">{{cars.carModel}}</b><br>

        <span class="carRentalSpan1">
          <svg style="display: inline-block; vertical-align: middle;" t="1737080118553" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2918" width="200" height="200">
            <path d="M629.333333 330.666667h10.666667a117.333333 117.333333 0 0 1 117.333333 117.333333v330.666667a42.666667 42.666667 0 1 0 85.333334 0V277.333333a53.333333 53.333333 0 0 1-29.354667-97.877333L768 106.666667l22.613333-22.613334 116.053334 116.032V778.666667a106.666667 106.666667 0 0 1-213.333334 0V448a53.333333 53.333333 0 0 0-53.333333-53.333333h-10.666667v512H682.666667v64H85.333333v-64h53.333334V170.666667A117.333333 117.333333 0 0 1 256 53.333333h256A117.333333 117.333333 0 0 1 629.333333 170.666667v160z m-64 576V170.666667A53.333333 53.333333 0 0 0 512 117.333333H256A53.333333 53.333333 0 0 0 202.666667 170.666667v736h362.666666z m-298.666666-704h234.666666v192h-234.666666v-192z m64 64v64h106.666666v-64h-106.666666zM256 768h256v64H256v-64z" fill="#979797" p-id="2919"></path>
          </svg>
          <span style="display: inline-block; vertical-align: middle;"> {{cars.fuelLevel}}%油量</span>
        </span><br><br>

        <span class="carRentalSpan2">
          <van-rate v-model="value" :count="1" />
          <span class="carRentalSpan3">4.4({{cars.rating}}评价)</span>
        </span>
      </div>

      <div class="carRentalDiv5">
        <p class="carRentalP1">
          <svg t="1737081016098" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3944" width="200" height="200">
            <path d="M511.913993 63.989249C317.882076 63.989249 159.973123 221.898203 159.973123 415.930119c0 187.323366 315.473879 519.998656 328.890979 534.103813 6.020494 6.364522 14.449185 9.976818 23.221905 9.976818 0.172014 0 0.516042 0 0.688056 0 8.944734 0 17.545439-4.128339 23.393919-11.008903l109.22896-125.054258c145.179909-177.690576 218.629934-314.957836 218.629934-407.845456C864.026877 221.898203 706.117924 63.989249 511.913993 63.989249zM511.913993 575.903242c-88.415253 0-159.973123-71.55787-159.973123-159.973123s71.55787-159.973123 159.973123-159.973123 159.973123 71.55787 159.973123 159.973123S600.329246 575.903242 511.913993 575.903242z" fill="#575B66" p-id="3945"></path>
          </svg>
          <span class="carRentalSpan4">1.3公里</span></p>

        <span>
          <span><b>￥{{cars.pricePerHour}}</b>/小时</span>
        </span>
      </div>

    </div>


    <!-- 租车信息填写栏 -->
    <div class="carRentalDiv2">
      <span class="carRentalSpan5">租车信息</span><br/>
      <span class="carRentalSpan6">姓名</span>
      <input class="carRentalInput1" type="text" v-model="user.nickname"><br/>
      <span class="carRentalSpan6">开始时间</span>
      <input class="carRentalInput1" type="datetime-local" v-model="startTime"><br/>
      <span class="carRentalSpan6">结束时间</span>
      <input class="carRentalInput1" type="datetime-local" v-model="endTime">
    </div>


    <!-- 租赁说明栏 -->
    <div class="carRentalDiv7">
      <p class="carRentalP2">
        <b style="display: inline-block; vertical-align: middle;">租赁说明</b>
        <svg style="display: inline-block; vertical-align: middle;" t="1737082845737" class="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2745" width="200" height="200">
          <path d="M512 81.408a422.4 422.4 0 1 0 422.4 422.4A422.4 422.4 0 0 0 512 81.408z m26.624 629.76a45.056 45.056 0 0 1-31.232 12.288 42.496 42.496 0 0 1-31.232-12.8 41.984 41.984 0 0 1-12.8-30.72 39.424 39.424 0 0 1 12.8-30.72 42.496 42.496 0 0 1 31.232-12.288 43.008 43.008 0 0 1 31.744 12.288 39.424 39.424 0 0 1 12.8 30.72 43.008 43.008 0 0 1-13.312 31.744z m87.04-235.52a617.472 617.472 0 0 1-51.2 47.104 93.184 93.184 0 0 0-25.088 31.232 80.896 80.896 0 0 0-9.728 39.936v10.24h-64v-10.24a119.808 119.808 0 0 1 12.288-57.344A311.296 311.296 0 0 1 555.52 460.8l10.24-11.264a71.168 71.168 0 0 0 16.896-44.032A69.632 69.632 0 0 0 563.2 358.4a69.632 69.632 0 0 0-51.2-17.92 67.072 67.072 0 0 0-58.88 26.112 102.4 102.4 0 0 0-16.384 61.44h-61.44a140.288 140.288 0 0 1 37.888-102.4 140.8 140.8 0 0 1 104.96-38.4 135.68 135.68 0 0 1 96.256 29.184 108.032 108.032 0 0 1 36.352 86.528 116.736 116.736 0 0 1-25.088 73.216z" p-id="2746"></path>
        </svg>
      </p>
      <span>
        在预定租车服务时，请选择您所需的车型和规格，确保符合您的出行需求。请提前确定租车的开始和结束时间，
        以便我们为您安排车辆的提取和归还。租车人员必须持有效驾驶证，并符合我们的租车要求。
      </span>
    </div>

    <!-- 下一步按钮 -->
    <button class="carRentalButton1">
      <b @click="goToXia" class="carRentalB4">下一步</b>
    </button>

  </div>
</template>

<style>
@import 'carRental.css';
</style>